//添加至分组弹窗
import { useState, useEffect } from "react";
import CommonModal from "@/components/CommonModal";
import CommonSelect from "@/pages/OrderModule/common/components/CommonSelect";
import { Form, Select, Tooltip, Button } from "antd";
import CommonLoading from "@/components/CommonLoading";
import CreatGroupModal from "./CreatGroupModal";

import { isEmpty } from "lodash";

const { Option } = Select;

const AddToGroup = ({ visible, groupList, handleCancel, hanleOk, CreateGroup }) => {
	const [loading, setloading] = useState(false);
	const [createVisible, setCreateVisible] = useState(false); //创建分组弹窗

	const [form] = Form.useForm();

	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	//底部按钮渲染
	const footerRender = () => {
		return (
			<div style={{ display: "flex" }}>
				<span>当前勾选生效1个</span>
				<Button
					onClick={() => {
						setCreateVisible(true);
						handleCancel();
					}}
					type="link"
				>
					创建为新分组
				</Button>
				<div style={{ marginLeft: "auto" }}>
					<Button onClick={handleCancel}>取消</Button>
					<Button onClick={onFinish} type="primary">
						确定
					</Button>
				</div>
			</div>
		);
	};

	const onFinish = () => {
		form
			.validateFields()
			.then(val => {
				console.log("val123", val);
				hanleOk(val);
			})
			.catch(err => {});
	};

	//分组下拉
	const options =
		!isEmpty(groupList) &&
		groupList.map(d => (
			<Option value={d.id} key={d.id} label={d.name}>
				<Tooltip title={d.name}>{d.name}</Tooltip>
			</Option>
		));

	//创建分组弹窗
	const CreatGroupModalProps = {
		visible: createVisible,
		handleCancel() {
			setCreateVisible(false);
		},
		hanleOk(val) {
			CreateGroup(val);
			setCreateVisible(false);
		}
	};

	return (
		<CommonModal
			footer={footerRender()}
			title="添加至分组"
			visible={visible}
			onCancel={handleCancel}
			onOk={onFinish}
			width="494px"
			minHeight="100px"
		>
			<Form
				name="create-group"
				onFinish={onFinish}
				autoComplete="off"
				layout="horizontal"
				labelAlign="right"
				form={form}
				initialValues={{}}
			>
				<p>请选择要添加的店铺分组</p>
				<Form.Item name="id" rules={[{ required: true, message: "请输入分组名称" }]} style={{ marginTop: 16 }}>
					<CommonSelect showSearch aria-required placeholder="请选择店铺分组">
						{options}
					</CommonSelect>
				</Form.Item>
			</Form>
			<CreatGroupModal {...CreatGroupModalProps} />
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default AddToGroup;
